import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:series_play/comm/ext/context_ext.dart';
import 'package:series_play/generated/assets.dart';
import 'package:series_play/widget/app_image.dart';
import 'package:series_play/widget/app_text.dart';

import '../app_color.dart';

/// 选集解锁弹框
class EpisodeUnlockDialog extends StatefulWidget {
  const EpisodeUnlockDialog({super.key});

  @override
  State<EpisodeUnlockDialog> createState() => _EpisodeUnlockDialogState();
}

class _EpisodeUnlockDialogState extends State<EpisodeUnlockDialog> {
  var activeIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16).w,
      child: Column(
        children: [
          Row(
            textDirection: TextDirection.rtl,
            children: [
              GestureDetector(
                onTap: () {
                  Navigator.of(context).pop();
                },
                child: Icon(Icons.close_rounded, size: 16),
              ),
            ],
          ),
          14.verticalSpace,
          Row(
            children: [
              AppText.secondary('价格:', fontSize: 12),
              AppImage(Assets.imagesIcGold, size: 12),
              AppText.secondary('100', fontSize: 12),
              const Spacer(),
              AppText.secondary('账户余额:', fontSize: 12),
              AppImage(Assets.imagesIcGold, size: 12),
              AppText.secondary('100', fontSize: 12),
            ],
          ),
          12.verticalSpace,
          subscribeView(_SubscribeType.week),
          16.verticalSpace,
          subscribeView(_SubscribeType.month),
          16.verticalSpace,
          payGrid(),
          16.verticalSpace,
          subscribeView(_SubscribeType.year),
        ],
      ),
    );
  }

  /// 订阅项
  Widget subscribeView(_SubscribeType type) {
    var background = type == _SubscribeType.week
        ? Assets.imagesBgSubscribeWeek
        : (type == _SubscribeType.month
              ? Assets.imagesBgSubscribeMonth
              : Assets.imagesBgSubscribeYear);

    var subscribeStr = type == _SubscribeType.week
        ? context.tr.weekly
        : (type == _SubscribeType.month
              ? context.tr.monthly
              : context.tr.yearly);

    var day = type == _SubscribeType.week
        ? 7
        : (type == _SubscribeType.month ? 30 : 365);
    return AspectRatio(
      aspectRatio: 343 / 103,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(background),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            AppText.title(subscribeStr, color: const Color(0xff363636)),
            Row(
              children: [
                AppText.title(
                  '\$199.00',
                  color: const Color(0xff363636),
                  fontSize: 20,
                ),
                4.horizontalSpace,
                AppText.secondary(
                  '\$0.66/${context.tr.day}',
                  color: const Color(0xff363636),
                ),
              ],
            ),
            AppText(
              context.tr.unlimitedViewingDesc(day),
              fontSize: 12,
              color: const Color(0xff363636),
            ),
          ],
        ),
      ),
    );
  }

  Widget payGrid() {
    return GridView.builder(
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16.w,
        mainAxisSpacing: 16.w,
        childAspectRatio: 1.8,
      ),
      itemBuilder: (context, index) {
        final child = Container(
          decoration: activeIndex == index
              ? BoxDecoration(
                  gradient: LinearGradient(
                    colors: [const Color(0xFF31343F), const Color(0xffD90F52)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    stops: [0.7, 1],
                  ),
                  border: Border.all(
                    color: const Color(0xFFD90F52),
                    width: 2.w,
                  ),
                  borderRadius: BorderRadius.circular(6).r,
                )
              : BoxDecoration(
                  color: const Color(0xFF31343F),
                  border: Border.all(
                    color: const Color(0xCF434653),
                    width: 2.w,
                  ),
                  borderRadius: BorderRadius.circular(6).r,
                ),
          child: Stack(
            children: [
              Align(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    AppImage(Assets.imagesIcGold, size: 18),
                    AppText.title('666655', color: Colors.white, fontSize: 20),
                    AppText.secondary('\$12', color: AppColor.white_60),
                  ],
                ),
              ),
              index == activeIndex
                  ? Positioned(
                      top: 0,
                      right: 0,
                      child: Container(
                        height: 16.w,
                        padding: const EdgeInsets.symmetric(horizontal: 5).w,
                        decoration: BoxDecoration(
                          color: const Color(0xFFD90F52),
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(6).r,
                            bottomLeft: Radius.circular(6).r,
                          ),
                        ),
                        child: AppText(
                          '+12%',
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                    )
                  : Container(),
            ],
          ),
        );
        return GestureDetector(
          onTap: () {
            setState(() {
              activeIndex = index;
            });
          },
          child: child,
        );
      },
      itemCount: 4,
    );
  }
}

enum _SubscribeType { week, month, year }
